<!--
 * @Description: 玫瑰图-元素交互
 * @Author: xjc
 * @Date: 2022-06-21 11:45:56
 * @LastEditTime: 2022-06-21 11:48:17
 * @LastEditors: xjc
-->
<template>
  <div id="interaction-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Rose} = G2Plot

onMounted(() => renderInteraction())


function renderInteraction() {
  const data = [
    {type: 'JavaScript', value: 27},
    {type: 'Java', value: 25},
    {type: 'Python', value: 18},
    {type: 'Php', value: 15},
    {type: 'C++', value: 10},
    {type: 'Go', value: 5},
  ]
  const rosePlot = new Rose('interaction-container', {
    data,
    xField: 'type',
    yField: 'value',
    seriesField: 'type',
    radius: 0.9,
    legend: {
      position: 'bottom',
    },
    interactions: [{ type: 'element-active' }],
  });

  rosePlot.update({ "theme": { "styleSheet": { "brandColor": "#FF4500", "paletteQualitative10": ["#FF4500", "#1AAF8B", "#406C85", "#F6BD16", "#B40F0F", "#2FB8FC", "#4435FF", "#FF5CA2", "#BBE800", "#FE8A26"], "paletteQualitative20": ["#FF4500", "#1AAF8B", "#406C85", "#F6BD16", "#B40F0F", "#2FB8FC", "#4435FF", "#FF5CA2", "#BBE800", "#FE8A26", "#946DFF", "#6C3E00", "#6193FF", "#FF988E", "#36BCCB", "#004988", "#FFCF9D", "#CCDC8A", "#8D00A1", "#1CC25E"] } } });
  rosePlot.update({ "theme": { "styleSheet": { "brandColor": "#9DF5CA", "paletteQualitative10": ["#9DF5CA", "#61DDAA", "#42C090", "#19A576", "#008A5D", "#006F45", "#00562F", "#003E19", "#002800"], "paletteQualitative20": ["#9DF5CA", "#61DDAA", "#42C090", "#19A576", "#008A5D", "#006F45", "#00562F", "#003E19", "#002800"] } } });
  rosePlot.update({ "theme": { "styleSheet": { "brandColor": "#B8E1FF", "paletteQualitative10": ["#B8E1FF", "#9AC5FF", "#7DAAFF", "#5B8FF9", "#3D76DD", "#085EC0", "#0047A5", "#00318A", "#001D70"], "paletteQualitative20": ["#B8E1FF", "#9AC5FF", "#7DAAFF", "#5B8FF9", "#3D76DD", "#085EC0", "#0047A5", "#00318A", "#001D70"] } } });
  rosePlot.update({ "theme": { "styleSheet": { "brandColor": "#014c63", "paletteQualitative10": ["#014c63", "#168575", "#0bc286", "#96dcb0", "#F2EAEA", "#FFA884", "#FF6836", "#D13808", "#7A270E"], "paletteQualitative20": ["#014c63", "#10686c", "#168575", "#16a37e", "#0bc286", "#65cf9b", "#96dcb0", "#c1e8c5", "#F2EAEA", "#FFC5AC", "#FFA884", "#FF895D", "#FF6836", "#F3470D", "#D13808", "#A4300C", "#7A270E"] } } });
  rosePlot.update({ "theme": { "styleSheet": { "brandColor": "#FF6B3B", "paletteQualitative10": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA"], "paletteQualitative20": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA", "#2BCB95", "#B1ABF4", "#1D42C2", "#1D9ED1", "#D64BC0", "#255634", "#8C8C47", "#8CDAE5", "#8E283B", "#791DC9"] } } });
  rosePlot.render()
}
</script>
